<template>
  <div class="history-container">
    <!-- 侧边导航栏 -->
    <el-aside width="240px" class="sidebar">
      <div class="logo">
        <span class="logo-text">智周万物</span>
      </div>
      <el-menu
        default-active="/history"
        class="sidebar-menu"
        background-color="#f5f7fa"
        text-color="#333"
        active-text-color="#039be5"
        router
      >
        <el-menu-item index="/">
          <el-icon><Home /></el-icon>
          <span>AI聊天</span>
        </el-menu-item>
        <el-menu-item index="/history">
          <el-icon><History /></el-icon>
          <span>历史记录</span>
        </el-menu-item>
        <el-menu-item index="/profile">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <div class="page-header">
        <h1>聊天历史记录</h1>
        <div class="search-bar">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索历史会话..."
            prefix-icon="Search"
            class="search-input"
          ></el-input>
        </div>
      </div>

      <!-- 历史会话列表 -->
      <div class="history-list">
        <div v-if="filteredChats.length === 0" class="empty-state">
          <div class="empty-icon"></div>
          <p>暂无聊天历史记录</p>
          <el-button type="primary" @click="goToChat">开始新聊天</el-button>
        </div>

        <div class="history-card" v-for="chat in filteredChats" :key="chat.id">
          <div class="card-header">
            <div class="chat-title">{{ chat.title }}</div>
            <div class="chat-time">{{ formatDate(chat.timestamp) }}</div>
          </div>
          <div class="card-content">
            <p class="last-message">{{ chat.lastMessage }}</p>
          </div>
          <div class="card-actions">
            <el-button type="text" @click="continueChat(chat.id)">继续聊天</el-button>
            <el-button type="text" class="delete-btn" @click="deleteChat(chat.id)">删除</el-button>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Home, History, User, Search } from '@element-plus/icons-vue'

const router = useRouter()

// 搜索关键词
const searchKeyword = ref('')

// 模拟历史会话数据
const chatHistory = ref([
  {
    id: '1',
    title: 'AI创作 - 春天的诗',
    lastMessage: '这是一首关于春天的诗：...',
    timestamp: Date.now() - 86400000 * 3,
    messageCount: 12
  },
  {
    id: '2',
    title: '数学问题 - 一元二次方程',
    lastMessage: '解一元二次方程的步骤是：...',
    timestamp: Date.now() - 86400000 * 2,
    messageCount: 8
  },
  {
    id: '3',
    title: '代码优化 - JavaScript',
    lastMessage: '优化建议：使用let代替var...',
    timestamp: Date.now() - 86400000,
    messageCount: 15
  },
  {
    id: '4',
    title: '旅游攻略 - 日本东京',
    lastMessage: '东京必去景点推荐：...',
    timestamp: Date.now() - 3600000 * 5,
    messageCount: 20
  },
  {
    id: '5',
    title: '健康饮食 - 减脂餐',
    lastMessage: '一周减脂餐食谱：...',
    timestamp: Date.now() - 3600000 * 2,
    messageCount: 10
  }
])

// 过滤后的会话列表
const filteredChats = computed(() => {
  if (!searchKeyword.value) return chatHistory.value
  const keyword = searchKeyword.value.toLowerCase()
  return chatHistory.value.filter(chat => 
    chat.title.toLowerCase().includes(keyword) || 
    chat.lastMessage.toLowerCase().includes(keyword)
  )
})

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diffTime = Math.abs(now - date)
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
  }
}

// 继续聊天
const continueChat = (chatId) => {
  router.push({ name: 'Chat', params: { id: chatId } })
}

// 删除会话
const deleteChat = (chatId) => {
  const index = chatHistory.value.findIndex(chat => chat.id === chatId)
  if (index !== -1) {
    chatHistory.value.splice(index, 1)
    ElMessage.success('会话已删除')
  }
}

// 去聊天页面
const goToChat = () => {
  router.push('/')
}
</script>

<style scoped>
.history-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background-color: #f5f7fa;
  border-right: 1px solid #e5e9f2;
  height: 100%;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e9f2;
  padding: 0 20px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #039be5;
}

.sidebar-menu {
  border-right: none;
  height: calc(100% - 60px);
}

.main-content {
  padding: 20px;
  overflow-y: auto;
  background-color: #f9fafc;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.search-bar {
  width: 300px;
}

.search-input {
  width: 100%;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.history-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.history-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chat-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.chat-time {
  font-size: 12px;
  color: #999;
}

.card-content {
  margin-bottom: 20px;
}

.last-message {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.delete-btn {
  color: #f5222d;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #666;
}

.empty-icon {
  width: 80px;
  height: 80px;
  background-color: #f5f7fa;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-icon::after {
  content: '📄';
  font-size: 32px;
}
</style>